import React, {useEffect, useRef, useState} from 'react';
import * as echarts from 'echarts';
import {reqGetEchartsUserList} from "../../../../api/backStage/echarts";


const UserChart = () => {
    const chartRef = useRef(null);
    const [echartsArr, setEchartsArr] = useState([])
    let option = {
        tooltip: {
            trigger: 'item'
        },
        xAxis: {
            type: 'category',
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: echartsArr,
                type: 'line',
                smooth: true
            }
        ]
    };


    //获取课程订单列表
    useEffect(() => {
        const getData = async () => {
            const result = await reqGetEchartsUserList();
            const newData = result.data.map((item) => ({value: item.user_count}));
            setEchartsArr(newData);
        };
        getData()
    }, [])


    useEffect(() => {
        if (chartRef.current && echartsArr.length > 0) {
            const myChart = echarts.init(chartRef.current);
            myChart.setOption(option);
        }
    }, [option, echartsArr]);

    return (
        <div>
            <h1>用户增长</h1>
            <div >
                <div ref={chartRef} style={{width: 1200, height: 500}} ></div>
            </div>
        </div>
    );
};

export default UserChart;